<template>
	<view class="wrap" @click="goDetail">
		<view class="leftContent">
			<text class="tag">{{activityTypeStr}}</text>
			<view class="tag2" v-if="isReferralBonuses == 0">推荐奖励</view>
			<image class="img" :src="activityUrl" mode=""></image>
		</view>
		
		<view class="rightContent">
			<view class="title">
				{{activityTitle}}
			</view>
			<view class="finishTimeWrap"  v-if="finishTime != 0">
				距离活动结束还有
				<text class="finishTime">{{duration}}</text>
			</view>
		  <view class="applyWrap">
		  	已报名:
				<text class="finishTime">{{applyCount + '人'}}</text>
				<view class="join">
					立即参加
				</view>
		  </view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: 'activity-cell',
		data() {
			return {
				activityTypeStr : '',
				duration : ''
			}
		},
	props:{
		//活动id
		activityId: {
			type: String,
			default: ''
		},
		// 活动图片
		activityUrl:{
			type:String,
			default:''
		},
	    // 活动类型字符串
		activityType: {
		   type:Number,
		   default:-1
		},
		//优惠类型
		couponType: {
			type:String,
			default:''
		},
		//活动标题
		activityTitle: {
			type:String,
			default:'一键加油 立减20元'
		},
		//距离活动结束时间
		finishTime: {
			type:Number,
			default: 0
		},
		//报名人数
		applyCount: {
			type:String,
			default:'100'
		},
	  //是否推荐奖励
		isReferralBonuses: {
			type: Number,
			default: 1
		}
	},
	
	mounted() {
	 this.configData();
	 this.getDuritionTime();
	},
	
	methods: {
		configData() {
			switch(this.activityType) {
				case 1:
				 this.activityTypeStr = '秒杀活动'
				 break
				case 2: 
				this.activityTypeStr = '集客活动'
				break
				case 3: 
				this.activityTypeStr = '同行活动'
				break
				case 4:
				this.activityTypeStr = '抽奖活动'
			}	
		 },
		 getDuritionTime() {
			 //获取当前时间的毫秒值
			 var date = new Date();
			 var timestap = date.getTime();
			 //时间差
			 var difftime = (this.finishTime*1000 - timestap)/1000;	
			 var days = parseInt(difftime/86400); //天
			 var hours = parseInt(difftime/3600)-24*days; //时
			 this.duration = days + '天' + hours + '小时';
		 },
		 
		 goDetail() {
		 	let urls = [
		 		'../../pages/activity/activityDetail-secondKill',
		 		'../../pages/activity/activityDetail-gather',
		 		'../../pages/activity/activityDetail-peer',
		 		'../../pages/activity/activityDetail-sweepstakes',
		 		];
				
			if(this.activityType == 3) {//同行活动
			
			  if(uni.$u.test.isEmpty(this.$store.state.user.userInfo)){
			  	this.$store.dispatch('user/MmvLogin');
			  	return
			  }
			  uni.navigateTo({
			  	url: urls[this.activityType-1] + '?bizNo=' + this.activityId
			  })
			}else {
				uni.navigateTo({
					url: urls[this.activityType-1] + '?bizNo=' + this.activityId
				})
			}
		 }
		},
		
}
</script>

<style lang="scss" scoped>
.wrap {
	background-color: #fff;
	border-radius: 16upx;
	display: flex;
	margin: 30upx 32upx 0 40upx;
	.leftContent {
		width: 320upx;
		height: 240upx;
		// background-color: #20C3AA;
		position: relative;
		.img {
			width: 320upx;
		  height: 240upx;
		}
		.tag {
			position: absolute;
			left: 10upx;
			top: 10upx;
			background-color: #000000;
			color: #FFD394;
			padding: 12upx 14upx;
			border-radius: 8upx;
			font-size: 20upx;
		}
		
		.tag2{
			position: absolute;
			bottom: 30upx;
			right: 0upx;
			font-size: 20upx;
			font-weight: bold;
			padding: 0 14upx;
			color: #232323;
			line-height: 38upx;
			background: linear-gradient(#fffcde 0%, #ffd291 100%);
			border-radius: 8upx 0px 0px 8upx;
			box-sizing: border-box;
		}
		
	}
	

	
	.rightContent {
		width: 348upx;
		height: 240upx;
		// background-color: #2979FF;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.title {
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: bold;
			width: 330upx;
			font-size: 28upx;
			margin-top: 34upx;
			white-space: nowrap;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.finishTimeWrap {
			background-color: #F7F7F7;
			padding: 11upx 13upx;
			display: flex;
			color: #333;
			font-size: 20upx;
			margin-top: 10upx;
		}
	}
}

.applyWrap {
	display: flex;
	align-items: center;
	color: #333;
	font-size: 20upx;
	margin-top: 35upx;
	.join {
	  background-color: #12BAA4;
	  color: #FFFFFF;
	  padding: 10upx 20upx;
	  font-size: 24upx;
	  font-family: PingFang SC, PingFang SC-Medium;
	  font-weight: bold;
	  border-radius: 8upx;
		margin-left: 9upx;
	}
}


.finishTime {
	color: #EC4863;
	margin-left: 10upx;
	font-size: 20upx;
	font-weight: bold;
}

</style>
